<div class="meta-section">
  <div class="meta-section-header">
    <h4 class="meta-section-header-title">通用结构：</h4>
  </div>
  <div class="meta-section-container">
    <div class="meta-doc-block">
      <h4>一级导航</h4>
      <p>以侧边栏的形式表现，html文件在views/permission/common/sidebar.html, scss文件在structure.scss</p>
      <div class="meta-doc-block-example">
        <div class="meta-sidebar" style="position:static">
          <div class="meta-sidebar-header">
              <p>大标题<span>小标题</span></p>
          </div>
          <h2 class="meta-sidebar-list-header">一级导航-列表标题</h2>
          <ul class="meta-sidebar-list meta-blue-sidebar-list">
              <li><a class="active">一级导航－选中状态</a></li>
              <li><a>一级导航</a></li>
          </ul>
          <h2 class="meta-sidebar-list-header">一级导航-列表标题</h2>
          <ul class="meta-sidebar-list meta-blue-sidebar-list">
              <li><a>一级导航-1</a></li>
              <li><a>一级导航-2</a></li>
              <li><a>一级导航-3</a></li>
          </ul>
          <h2 class="meta-sidebar-list-header">一级导航-列表标题</h2>
          <ul class="meta-sidebar-list meta-yellow-sidebar-list">
              <li><a>一级导航-1</a></li>
              <li><a>一级导航-2</a></li>
              <li><a>一级导航-3</a></li>
          </ul>
        </div>
      </div>
      <div class="meta-doc-block-code">
        <pre>
          <code data-lang="html">
            &lt;div class="meta-sidebar" style="position:static"&gt;
              &lt;div class="meta-sidebar-header"&gt;
                  &lt;p&gt;大标题&lt;span&gt;小标题&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;
              &lt;h2 class="meta-sidebar-list-header"&gt;一级导航-列表标题&lt;/h2&gt;
              &lt;ul class="meta-sidebar-list meta-blue-sidebar-list"&gt;
                  &lt;li&gt;&lt;a class="active"&gt;一级导航－选中状态&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;一级导航&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;h2 class="meta-sidebar-list-header"&gt;一级导航-列表标题&lt;/h2&gt;
              &lt;ul class="meta-sidebar-list meta-blue-sidebar-list"&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;h2 class="meta-sidebar-list-header"&gt;一级导航-列表标题&lt;/h2&gt;
              &lt;ul class="meta-sidebar-list meta-yellow-sidebar-list"&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;一级导航-3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          </code>
        </pre>
      </div>
    </div>
    <div class="meta-doc-block">
      <h4>字体</h4>
      <p>通用的文件大小，文件在common.scss中</p>
      <div class="meta-doc-block-example">
        <p class="color-normalGray font-size-xxl">1. $font-size-xxl: 字体大小 24px </p>
        <p class="color-normalGray font-size-xl">2. $font-size-xl: 字体大小 22px </p>
        <p class="color-normalGray font-size-l">3. $font-size-l: 字体大小 20px </p>
        <p class="color-normalGray font-size-m">4. $font-size-m: 字体大小 18px </p>
        <p class="color-normalGray font-size-s">5. $font-size-s: 字体大小 16px </p>
        <p class="color-normalGray font-size-xs">6. $font-size-xs: 字体大小 14px </p>
        <p class="color-normalGray font-size-xxs">7. $font-size-xxs: 字体大小 12px </p>
      </div>
      <div class="meta-doc-block-code">
        <pre>
          <code>
            .example{
              font-size: $font-size-m;
            }
          </code>
        </pre>
      </div>
    </div>
  </div>
</div>
<div class="meta-section">
  <div class="meta-section-header">
    <h4 class="meta-section-header-title">通用样式：</h4>
  </div>
  <div class="meta-section-container">
    <div class="meta-doc-block">
      <h4>颜色</h4>
      <p>通用的颜色，文件在common.scss中</p>
      <div class="meta-doc-block-example">
        <p class="color-blue">1. $blue</p>
        <p class="color-yellow">2. $yellow</p>
        <p class="color-gray">3. $gray</p>
        <p class="color-normalGray">4. $normalGray</p>
        <p class="color-lightGray">5. $lightGray</p>
        <p class="color-lightBlack">6. $lightBlack</p>
      </div>
      <div class="meta-doc-block-code">
        <pre>
          <code>
            .example{
              color: $blue;
            }
          </code>
        </pre>
      </div>
    </div>
    <div class="meta-doc-block">
      <h4>字体</h4>
      <p>通用的文件大小，文件在common.scss中</p>
      <div class="meta-doc-block-example">
        <p class="color-normalGray font-size-xxl">1. $font-size-xxl: 字体大小 24px </p>
        <p class="color-normalGray font-size-xl">2. $font-size-xl: 字体大小 22px </p>
        <p class="color-normalGray font-size-l">3. $font-size-l: 字体大小 20px </p>
        <p class="color-normalGray font-size-m">4. $font-size-m: 字体大小 18px </p>
        <p class="color-normalGray font-size-s">5. $font-size-s: 字体大小 16px </p>
        <p class="color-normalGray font-size-xs">6. $font-size-xs: 字体大小 14px </p>
        <p class="color-normalGray font-size-xxs">7. $font-size-xxs: 字体大小 12px </p>
      </div>
      <div class="meta-doc-block-code">
        <pre>
          <code>
            .example{
              font-size: $font-size-m;
            }
          </code>
        </pre>
      </div>
    </div>


  </div>
</div>
